
// 权限拦截需要在路由跳转 导航守卫
import router from '@/router' // 导入路由，不需要再次到处，因为文件已经在main.js中引入了
import store from '@/store' // 引入store实例和组件中的 this.store是一回事
const whiteList = ['/login', '/404'] // 定义白名单，不受无token的影响
import NProgress from 'nprogress' // 引入进度条
import 'nprogress/nprogress.css' // 引入进度条的样式

router.beforeEach(async(to, from, next) => { // 导航到前置守卫
  NProgress.start() // 开启进度条
  // next 是前置守卫必须执行的钩子， next必须执行，如果不执行页面就死了
  // next() 放过
  // next(false) //跳转终止
  // next(地址) 跳转到某个地址
  // to.path 要跳转的页面
  // from.path 从哪个页面过来
  // store.getters.token // 从vuex的getters中取出token
  if (store.getters.token) {
    // 如果有token，判断是否是去登录页
    if (to.path === '/login') {
      // 如果是登录页，跳转到主页
      next('/') // 跳转到主页
    } else {
      // 如果不是登录页
      // 如果有了token也可以获取用户资料
      // 只有放过了才去获取用户数据，
      // 是每次都获取吗？不是，判断是否已经获取了用户资料，已经有资料了，就不用再次获取了
      if (!store.getters.userId) {
        // 证明没有这个id，需要获取数据, dispatch是异步函数，
        // 如果dispatch没有执行完就执行了next() 会拿不到数据，所以这里必须等待dispatch执行结束
        await store.dispatch('user/getUserInfo')
      }
      next() // 执行放过
    }
  } else {
    // 如果没有token
    // 判断是否在白名单
    if (whiteList.indexOf(to.path) !== -1) {
      // 证明有数组,在白名单中，直接放行
      next()
    } else {
      // 不在白名单
      // next('/login')
      next(`/login?redirect=${to.path}`)
    }
  }
  NProgress.done() // 手动强制关闭一次  为了解决 手动切换地址时  进度条的不关闭的问题
})

router.afterEach(() => {
  NProgress.done()
}) // 导航后置首位

